<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>::Portal Cognitive::</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
         <meta name="description" content=""/>
         <meta name="author" content=""/>
        <!-- Le styles -->
        <link href="resources/styles/bootstrap.css" rel="stylesheet"/>
        <link href="resources/styles/validationEngine.jquery.css" rel="stylesheet"/>
        <link href="resources/styles/nivo-slider.css" rel="stylesheet"/>
        <link href="resources/styles/dark/dark.css" rel="stylesheet"/>
        <link href="resources/styles/portal.css" rel="stylesheet"/>
        
        <style type="text/css">
          body {
            padding-top: 60px;
            padding-bottom: 40px;
          }
          
          .navbar-search {
                padding-left: 35px;
            }

            .slider-header {
                position: relative;
                top: -20px;

            }
            
            #slider {
                height: 300px;
            }
            .navbar {
                margin-bottom: 0;
            }
        </style>
        
         <!-- Le sCRIPTS -->
        <script type="text/javascript" src="resources/js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="resources/js/featureList.js"></script>
        
         <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
        
    </h:head>
    <h:body>
        <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="blue-shadow" href="#">Portal Cognitive</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">MMORPG</a></li>
              <li><a href="#contact">Aventura</a></li>
              <li><a href="#contact">Comunidade</a></li>
            </ul>
             <h:form id="form-login" class="navbar-search">  
                <input type="text" class="search-query" placeholder="Pesquisar no portal..."/>  
             </h:form>  
              <ul class="nav navbar-form pull-right">
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Entrar <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li class="nav-header">Login</li>
                   <li class="divider"></li>
                  <li>
                      <div id="login-form">
                          
                          <h:form class="login">
                              <h:inputText class="mail validate[required,custom[email]] text-input" id="email" value="#{sessionBean.user.email}" />
                              <h:inputSecret class="pass validate[required] text-input" id="password" value="#{sessionBean.user.password}"/>
                              <span id="check-lembrar"><input type="checkbox" id="lembrar"/><span>lembrar</span></span>
                               <h:commandButton class="btn" value="Entrar" action="#{sessionBean.log()}"/>
                          </h:form>
                          
                      </div>
                  </li>
                  <li class="divider"></li>
                  <li><a data-toggle="modal" href="#responsive">Registre-se!</a></li>
                </ul>
              </li>
              </ul>

          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="slider-header">

      <!-- Main hero unit for a primary marketing message or call to action -->
     
<!--        <div id="feature_list">
			<ul id="tabs">
				<li>
					<a href="javascript:;">
						<img src="resources/images/story.png" />
						<h3>Aventure-se agora!</h3>
						<span>Conheça um novo universo.</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="resources/images/controll.png" />
						<h3>Galeria dos gamers</h3>
						<span>Veja as suas criações.</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="resources/images/buy.png" />
						<h3>Compre fácil</h3>
						<span>Preços promocionais de inauguração.</span>
					</a>
				</li>
			</ul>
			<ul id="output">
				<li>
					<img src="resources/images/dark_frame.jpg" />
                                        <a class="btn btn-primary btn-large">Downloads &raquo;</a>
					
				</li>
				<li>
					<img src="resources/images/dark_frame.jpg" />
					<a class="btn btn-primary btn-large">Ver galeria &raquo;</a>
				</li>
				<li>
					<img src="resources/images/dark_frame.jpg" />
					<a class="btn btn-primary btn-large">Saiba mais &raquo;</a>
				</li>
			</ul>

		</div>-->

               <div class="slider-wrapper theme-dark">
                    <div id="slider" class="nivoSlider">
                        <img src="resources/images/tron.jpg" data-thumb="resources/images/tron.jpg" alt="" />
                        <img src="resources/images/tbar.png" data-thumb="resources/images/tbar.png" alt=""  />
                    </div>
                  
               </div>
      
      
    </div>
        
        
        <div class="container">
      <div class="row">
        <div class="span4">
          <h2>Noticia</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">Leia mais &raquo;</a></p>
        </div>
        <div class="span4">
          <h2>Noticia</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">Leia mais &raquo;</a></p>
       </div>
        <div class="span4">
          <h2>Noticia</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">Leia mais &raquo;</a></p>
        </div>
      </div>

      <hr/>

      <footer>
        <p>&copy; Cognitive Games Brazil 2012</p>
      </footer>

    </div> <!-- /container -->
    
    
   <div id="responsive" class="modal hide fade" tabindex="-1" data-width="760">
       <h:form class="login">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: white">×</button>
              <h3>Registre-se agora, é muito simples!</h3>
              
            </div>
            <div class="modal-body">
              <div class="row-fluid">
                <div class="span6">
                  <h4>Seu email</h4>
                  <p><h:inputText id="email-register" class="span12 validate[required,custom[email]] text-input" value="#{registrationBean.user.email}" onfocus="" onblur="fillOnBlur('Insira seu email', this);"/></p>
                  <h4>Senha bem segura <a>(?)</a></h4>
                  <p><h:inputSecret id="pass-register" class="span12 validate[required,maxSize[10]]" value="#{registrationBean.password}" /></p>
                  <h4>País de origem</h4>
                  <p><h:selectOneMenu id="country-list" class="span6 validate[required]" value="#{registrationBean.user.country}">
                          <f:selectItems value="#{registrationBean.countryList}"/>
                  </h:selectOneMenu></p>
                </div>
                <div class="span6">
                  <h4>Email novamente</h4>
                  <p><h:inputText id="mail-registe32" class="span12" value="#{registrationBean.emailConfirm}" onfocus="" onblur="fillOnBlur('Insira seu email', this);"/></p>
                  <h4>Senha novamente</h4>
                  <p><h:inputSecret id="pass-register2" class="span12" value="#{registrationBean.passwordConfirm}" /></p>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" data-dismiss="modal" class="btn">Não, agora não</button>
              <h:commandButton class="btn btn-primary" value="Cadastrar-me!" action="#{registrationBean.signup()}" onclick="$('#ajx-loader').show();"/>
              <img id="ajx-loader" src="resources/images/ajax-loader.gif" alt="" style="padding-left: 7px; display: none; float: right"/>
            </div>
           </h:form>
    </div>
    
    </h:body>
    
    <script src="resources/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="iso-8859-1"></script>
    <script type="text/javascript" src="resources/js/jquery.validationEngine.js"></script>
    
    <script type="text/javascript" src="resources/js/jquery.nivo.slider.js"></script>
    
  
    <script type="text/javascript">
        
        function fillOnBlur (word, field) {
           field.value = (field.value)? field.value : word;
        }
        
        $(window).load(function (){
           $(".login").validationEngine(); 
        });
        
        $(document).ready(function() {

//			$.featureList(
//				$("#tabs li a"),
//				$("#output li"), {
//					start_item	:	1
//				}
//			);
                            
                       $("#login-form .login input").each (function () {
                           if (!$(this).val()) {
                               var value = (this.className == "mail")? "Email" : "Senha";
                               $(this).val(value);
                           }
                       });
                       
                       $("#login-form .login input").focus(function () {
                            if ($(this).val() == "Email" || $(this).val() == "Senha") {
                               $(this).val("");
                           }
                       });
                       
                        $("#login-form .login input").blur(function () {
                           if (!$(this).val()) {
                               var value = (this.className == "mail")? "Email" : "Senha";
                               $(this).val(value);
                           }
                       });
                       
                     
                        $('#slider').nivoSlider({
                            effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
                            slices: 15, // For slice animations
                            boxCols: 8, // For box animations
                            boxRows: 4, // For box animations
                            animSpeed: 500, // Slide transition speed
                            pauseTime: 3000, // How long each slide will show
                            startSlide: 0, // Set starting Slide (0 index)
                            directionNav: true, // Next  Prev navigation
                            controlNav: true, // 1,2,3... navigation
                            controlNavThumbs: false, // Use thumbnails for Control Nav
                            pauseOnHover: true, // Stop animation while hovering
                            manualAdvance: false, // Force manual transitions
                            prevText: 'Prev', // Prev directionNav text
                            nextText: 'Next', // Next directionNav text
                            randomStart: false, // Start on a random slide
                            beforeChange: function(){}, // Triggers before a slide transition
                            afterChange: function(){}, // Triggers after a slide transition
                            slideshowEnd: function(){}, // Triggers after all slides have been shown
                            lastSlide: function(){}, // Triggers when last slide is shown
                            afterLoad: function(){} // Triggers when slider has loaded
                        });
    
                        
                       
                       
        });
        
    </script>
    
       <!-- Le javascript
    ================================================== -->
 
   
    <script src="resources/js/bootstrap.min.js"></script>
</html>

